<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        <div>
            <!-- 单个复选框: 使用checked属性和change事件 (选中 -> true  否则就是false) -->
            <h2>单个复选框</h2>
            <p><input type="checkbox" v-model="isRem">是否记住用户名?</p>
            <p>isRem: {{isRem}}</p>
        </div>


        <div>
            <!-- 单个复选框: 使用checked属性和change事件 -->
            <!-- 单个复选框的值绑定 => 根据复选框的选中状态,对应不同的value中-->
            <h2>单个复选框 -> 值绑定</h2>
            <!-- <p><input type="checkbox" v-model="isAgree" true-value="agree" false-value="disagree">是否记住用户名?</p> -->
            <p><input type="checkbox" v-model="isAgree" :true-value="1" :false-value="0">是否记住用户名?</p>
            <p>isAgree: {{isAgree}}</p>
            <p>typeof: {{typeof isAgree}}</p>
        </div>

        <div>
           <!-- 注意: 如果下拉框中有value属性,则优先取value属性,否则取option标签对中的内容 -->
            <!-- 下拉框(单选): 使用value属性和change事件   => 单个值  -->
            <h2>下拉框(单选)</h2>
            <p>
                选择学员:
                <!-- <select v-model="stu" id="">
                    <option value="">请选择</option>
                    <option v-for="(item,index) in grade" :key="index" :value="item.name">{{item.name}}</option>
                  
                </select> -->
                <select v-model="stu" id="">
                    <option value="">请选择</option>
                    <option v-for="(item,index) in grade" :key="index" :value="item">{{item.name}}</option>
                  
                </select>
            </p>
            <p>stu:{{stu}}</p>
        </div>

      
       

    </div>
</body>

<script>
    new Vue({
        el:"#app",
        data:{
            isRem:false,
            isAgree:"disagree",
            grade:[{
                name:"张三",
                class:"2302",
                chinese:55,
                math:66,
                english:77
            },{
                name:"李四",
                class:"2302",
                chinese:76,
                math:69,
                english:91
            },{
                name:"王五",
                class:"2302",
                chinese:82,
                math:49,
                english:72,
            }],
            stu:"",
        },
       
    })


</script>
</html>